<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/">
<wicket:panel>
 
  <div wicket:id="examples" class="section">
  	<h2 id="behaviors">WiQuery events</h2>
	<p>
		<strong>WiQuery</strong> provides an extensive set of behaviors. Events
		are handled with behaviors.
	</p>
	<div class="section">
		<h3>Example 1: How events are handled</h3>
		<p>
			This first example shows how events are attached to a component.
			These events are attached in an unobtrusive fashion, by adding an
			event listener.
		</p>
		
		<div class="runit">
			<span wicket:id="example1">Click here to alert something</span>
		</div>
		
		<div class="source">
			<p class="htmlCode">
<code class="html">
&lt;span wicket:id="example1"&gt;Click here to alert something&lt;/span&gt;
</code>
			</p>
			<p class="javaCode">
<code class="java">
// consider being in a WebPage constructor 
public MyWebPage(String id) {
	super(id);
	
	Label label = new Label("example1", "Click here to alert something");
	this.add(label);
	label.add(new WiQueryEventBehavior(new Event(MouseEvent.CLICK) {
	
		@Override
		public JsScope callback() {
			return JsScope.quickScope("alert('something :)')");
		}
	
	}));			
}
</code>
			</p>
				<p>Events are handled by three concepts:</p>
				<dl>
					<dt><strong>WiQueryEventBehavior</strong>:</dt>
					<dd>class used to bind events with components</dd>
					<dt><strong>Event</strong>:</dt>
					<dd>this class is part of WiQuery core and is used
						to create reusable events attached to multiple components.
						The constructor of the Event class takes a list of event
						labels. These event labels can be custom events.</dd>
					<dt><strong>JsScope</strong>:</dt>
					<dd>this class abstracts JavaScript anonymous functions.
						A JsScope is like writing the following JavaScript statement:
						<p>
<pre class="brush: java;">
function() {
   
}
</pre>
						</p>
					</dd>
				</dl>		
		</div>		
	</div>
  </div>
  
</wicket:panel>
</html>
